<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <link rel="icon"  type="image/x-icon" href="/static/icon.jpg">
    <link rel="stylesheet" type="text/css" href="/static/css/note-css.css">
    <link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css">
    <title>素材列表</title>
</head>
<body>
    <div class="nova-note-nav">
        <div>
            {{ user.name }}
        </div>
        <div>
            <a href="/note/material/list">
                素材列表
            </a>
        </div>
        <div>
            <a href="/note/history">
                发送历史
            </a>
        </div>
    </div>
    <div class="nova-note-index-title">素材列表</div>
    <div class="nova-note-content">

          <div class="nova-note-list">
             <div>
            已有的素材列表
        </div>
        <input id="searchMessageList" placeholder="输入筛选条件">
            <ul id="materialList">
            {% for item in material%}
                <li data-target="{{ item['topic_id'] }}" >{{ item['title'] }}</li>
            {% endfor %}
            </ul>
        </div>
                    <div class="nova-material-content-preview nova-material-add" id="newMaterial">
                        <div>
                                 <i class="fa fa-plus"></i>
                            </div>

                    </div>
                    {% for item in material %}
                    <div class="nova-material-content-preview" id="{{ item['topic_id'] }}">
                           <header data-qr = "/note/material/get-html?id={{ item['topic_id'] }}" onmouseover = "show_qr(this)" onmouseleave = "remove_qr(this)">
                                <a  href="javascript:void(0);">{{ item['title'] }}</a>
                            </header>

                            <article>
                                {{ item['content'] | safe}}
                            </article>
                            <div class="nova-material-operate">
                                <div data-option="edit">
                                    <a href="/note/material/edit?id={{ item['topic_id'] }}">
                                        <i class="fa fa-pencil"></i>
                                    </a>
                                </div>
                                 <div data-option="send">
                                    <a href="/note/set-material?id={{ item['topic_id'] }}">
                                        <i class="fa fa-paper-plane"></i>
                                    </a>
                                </div>
                            </div>
                    </div >

                    {% endfor %}

    </div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script>
         var this_page = parseInt(location.search.match(/\d+/)) || 1;
    document.body.onkeyup = function(e){
        e = e || window.event;
        if(e.keyCode == 39){
            location.search = "?page="+ (this_page +1);
        }
        else if(e.keyCode == 37){
            if(this_page > 1)
                location.search = "?page=" + (this_page -1);
        }
    }

     document.getElementById("materialList").childNodes[1].click();

    document.getElementById("materialList").onclick = click_target;
    document.getElementById("newMaterial").onclick = function(){
    location.href ="/note/material/new"
    }
    function show_qr(that){
            var qr = qr_dom.show_qr(that, that.getAttribute("data-qr"));
    }
    function remove_qr(that){
           qr_dom.remove_qr(that)
    }
    var qr_dom = (function(){
        var img = document.createElement("img");
        img.setAttribute("style","width:180px;height:180px;float:right");
        var src_base = "http://smeug.nju.edu.cn:7000/?text=" ;
        return{
            show_qr: function(target_dom, qr_url){
                img.src = src_base + "http://" + location.host+qr_url;
                target_dom.appendChild(img);
            },
            remove_qr: function(target_dom){
                target_dom.removeChild(img);
            }
        }
    })();

    function click_target(e){
        e = e || window.event;
        var target = $(e.target);
        var toggle = target.data("target");
        if(toggle){
            $(".active").removeClass("active");
              target.addClass("active");
            location.href = "#" + toggle;
        }

    }

</script>
</body>
</html>